*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    --themeColor:#de4943; /*主题颜色 */
    list-style: none;
}
.Category {
    background-color: white;
    width: 100%;
    height: 100%;
    // 头部开始
    .categoryTop {
        width: 100%;
        height: 1.066667rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.266667rem;
        background-color: var(--themeColor);
        img {
            width: 0.8rem;
            height: 1.066667rem;
        }
        .title {
            font-size: 0.426667rem;
            color: white;
        }
        .lie {
            width: 0.8rem;
            height: 0.8rem;
            background: url(./images/headIcon.png) -150px 4px;
        }
    }
    // 头部结束
    // 搜索框开始
    .search {
        width: 100%;
        height: 1.066667rem;
        border-bottom: 1px solid #ddd;
        display: flex;
        align-items: center;
        justify-content: center;
        .inp {
            width:90% ;
            height: 0.746667rem;
            background-color: #ececec;
            border-radius: 0.133333rem;
            display: flex;
            align-items: center;
            em{
                display: block;
                width: 0.426667rem;
                height: 0.426667rem;
                background: url(./images/searchIcon2.png) ;
                background-size: 3.2rem 1.066667rem;
                background-position: -1.066667rem -0.426667rem;
            }
            p{
                margin-left: 0.133333rem;
            }
        }
    }
    // 搜索框结束
    // 分类列表开始
    .contentFrame {
        ul {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            .frameOne {
                width: 33%;
                height: 2.133333rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                border-bottom: 0.026667rem solid #ddd;
                i {
                    display: block;
                    width: 0.96rem;
                    height: 0.96rem;
                    background: url(./images/selectIcon.png) 0px 0px;
                    margin: 0.266667rem 0rem;
                }
            }
            
            .frameTwo {
                width: 33%;
                height: 2.133333rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                border-bottom: 0.026667rem solid #ddd;
                border-left: 1px solid #ddd;
                border-right:1px solid #ddd;
                i {
                    display: block;
                    width: 0.96rem;
                    height: 0.96rem;
                    background: url(./images/selectIcon.png) -72px 0px;
                    margin: 0.266667rem 0rem;
                }
            }
        
            .frameThere {
                width: 33%;
                height: 2.133333rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                border-bottom: 0.026667rem solid #ddd;
                i {
                    display: block;
                    width: 0.96rem;
                    height: 0.96rem;
                    background: url(./images/selectIcon.png) -165px 1px;;
                    margin: 0.266667rem 0rem;
                }
            }
        
            .frameFour {
                width: 33%;
                height: 2.133333rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                border-bottom: 0.026667rem solid #ddd;
                i {
                    display: block;
                    width: 0.96rem;
                    height: 0.96rem;
                    background: url(./images/selectIcon.png) 0 -70px;
                    margin: 0.266667rem 0rem;
                }
            }
        
            .frameFive {
                width: 33%;
                height: 2.133333rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                border-bottom: 0.026667rem solid #ddd;
                border-left: 1px solid #ddd;
                border-right:1px solid #ddd;
                i {
                    display: block;
                    width: 0.96rem;
                    height: 0.96rem;
                    background: url(./images/selectIcon.png) -84px -70px;
                    margin: 0.266667rem 0rem;
                }
            }
            .frameSix {
                width: 33%;
                height: 2.133333rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                border-bottom: 0.026667rem solid #ddd;
                i {
                    display: block;
                    width: 0.96rem;
                    height: 0.96rem;
                    background: url(./images/selectIcon.png) -165px -70px;
                    margin: 0.266667rem 0rem;
                }
            }
        
            .frameSeven {
                width: 33%;
                height: 2.133333rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                border-bottom: 0.026667rem solid #ddd;
                i {
                    display: block;
                    width: 0.96rem;
                    height: 0.96rem;
                    background: url(./images/selectIcon.png) 0 -141px;
                    margin: 0.266667rem 0rem;
                }
            }
        
            .frameEight {
                width: 33%;
                height: 2.133333rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                border-bottom: 0.026667rem solid #ddd;
                border-left: 1px solid #ddd;
                border-right:1px solid #ddd;
                i {
                    display: block;
                    width: 0.96rem;
                    height: 0.96rem;
                    background: url(./images/selectIcon.png) -84px -141px;
                    margin: 0.266667rem 0rem;
                }
            }
        
            .frameNine {
                width: 33%;
                height: 2.133333rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                border-bottom: 0.026667rem solid #ddd;
                i {
                    display: block;
                    width: 0.96rem;
                    height: 0.96rem;
                    background: url(./images/selectIcon.png) -165px -141px;
                    margin: 0.266667rem 0rem;
                }
            }
        
            .frameTen {
                width: 33%;
                height: 2.133333rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                border-bottom: 0.026667rem solid #ddd;
                i {
                    display: block;
                    width: 0.96rem;
                    height: 0.96rem;
                    background: url(./images/selectIcon.png) 0 -217px;
                    margin: 0.266667rem 0rem;
                }
            }
        
            .frameEleven {
                width: 33%;
                width: 33%;
                height: 2.133333rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                border-bottom: 0.026667rem solid #ddd;
                border-left: 1px solid #ddd;
                border-right:1px solid #ddd;
                i {
                    display: block;
                    width: 0.96rem;
                    height: 0.96rem;
                    background: url(./images/selectIcon.png) -84px -218px;
                    margin: 0.266667rem 0rem;
                }
            }
        
            .frameTwelve {
                width: 33%;
                height: 2.133333rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                border-bottom: 0.026667rem solid #ddd;
                i {
                    display: block;
                    width: 0.96rem;
                    height: 0.96rem;
                    background: url(./images/selectIcon.png) -165px -217px;
                    margin: 0.266667rem 0rem;
                }
            }
        }
    }
}